<template>
    <div class="indemnify-list">

        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.user" placeholder="读者" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.book" placeholder="书籍" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.status" placeholder="赔偿状态" >
                        <el-option v-for="(item, index) in statusList" :key="index" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searInfo">查询</el-button>
                    <!-- <el-button type="primary" v-if="roleId != 3" @click="addDialogVisible = true">添加</el-button> -->
                </el-form-item>
            </el-form>
        </div>

         <!-- 添加 -->
        <div class="add-box">
            <el-dialog title="新增逾期" @close="closeAddBtn" :visible.sync="addDialogVisible" :close-on-click-modal="false"
                :close-on-press-escape="false">
                <el-form :model="addForm" label-width="120px" ref="addForm">
                    <el-form-item label="书名" prop="book">
                        <el-input v-model="addForm.book" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="读者" prop="user">
                        <el-input v-model="addForm.user" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="赔偿金额" prop="amount">
                        <el-input v-model="addForm.amount" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="赔偿原因" prop="reason">
                        <el-input v-model="addForm.reason" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>



        <!-- 表格： -->
        <el-table v-loading="loading" element-loading-spinner="el-icon-loading" :data="tableData"
            :header-cell-style="{ height: '40px', background: '#f5f7fa', color: '#606266' }">
            <el-table-column prop="id" label="编号" width=""></el-table-column>
            <el-table-column prop="bookName" label="书名" width=""></el-table-column>
            <el-table-column prop="userName" label="读者" width=""></el-table-column>
            <el-table-column prop="compensationAmount" label="赔偿金额" width="" ></el-table-column>
            <el-table-column prop="compensationReason" label="赔偿原因" width="" ></el-table-column>
            <el-table-column prop="compensationStatus" label="赔偿状态" width="">
              <template slot-scope="scope">
                    <span v-if="scope.row.compensationStatus == 1">未赔偿</span>
                    <span v-else>已赔偿</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.compensationStatus == '1'" @click="infoBtn(scope.row)">已赔偿</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="pagination">
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                    layout="total, prev, pager, next, jumper" :total="totalRecord"></el-pagination>
            </div>
        </div>
    </div>
</template>



<script>
import { indemnifyList,changeStatus,addIndemnify} from '@/api/indemnify'

export default {

    methods: {
        // 获取信息api
        getList(params) {
            this.loading = true;
            let objParams = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...params,
                ...this.searchForm
            }

           indemnifyList(objParams).then(res => {
                this.loading = false;
                const { list, total } = res.data
                this.totalRecord = total;
                this.tableData = list;
            }).catch(error => {
                reject(error)
            })
        },
        // 添加api
        addInfo() {
            addIndemnify(this.addForm).then(res => {
                this.getList({})
                this.addDialogVisible = false
            }).catch(error => {
                reject(error)
            })
        },

        handleRemove(file, fileList) {
            console.log(file, fileList, "ddddd");
        },
  


        //分页
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList({});
        },
        //查询
        searInfo() {
            this.getList({});
        },
        closeAddBtn() {
            this.$refs['addForm'].resetFields();
        },

        infoBtn(row){
          changeStatus(row.id).then(res => {
                this.getList({})
            }).catch(error => {
                reject(error)
            })
        }

    },
    created() {
        this.getList()
        this.getCateList()
        this.roleId = this.$store.state.user.roleId
    },
    data() {
        return {
            roleId: '',
            fileInfo: '',
            loading: false,
            tableData: [],
            totalRecord: null,
            pageNum: 1,
            pageSize: 10,
            statusList: [
                { id: 1, name: '未赔偿' },
                { id: 2, name: '已赔偿' },
                ],
            searchForm: {
                author: '',
                cateId: '',
                name: '',
                userName: ''
            },
            coverImg: '',
            addDialogVisible: false,
            editDialogVisible: false,
            addForm: {
                name: '',
                author: '',
                totalNumber: '',
                spareNumber: '',
                status: '',
                location: '',
                publicationInformation: '',
                description: '',
                cateId: ''
            },
            editForm: {
                code: '',
                name: '',
            },
        }
    }
}
</script>



<style  lang="scss" scoped>
.indemnify-list {
    margin: 10px 30px;

    .add-box {
        margin-top: -10px;
        margin-bottom: 10px;
    }

    /**分页*/
    .pagination {
        text-align: right;
        min-width: 400px;
        background: #fff;
    }

    .el-pagination {
        padding: 10px !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

}
</style>




